<template>
  <visual-data-box title="最新消息">
    <div slot="content"
         class="hot-message">
      <template v-for="msg in list">
        <div :key="msg._id"
             class="msg-box"
             @click="showMsg(msg)">
          <div class="detail">
            <div class="msg">{{msg.msg}}</div>
            <div class="other">
              <div class="other-box">发起人：{{msg.location.dep_name}}</div>
              <div class="other-box">时间：{{msg.date_time}}</div>
            </div>
          </div>
          <Icon class="icon"
                style="color: #3ac0ff"
                type="md-arrow-forward" />
        </div>
      </template>
      <detail ref="JDetail" />
    </div>
  </visual-data-box>
</template>

<script>
import { reqPost } from 'global/axios';
import VisualDataBox from '../VisualDataBox';
import Detail from './Detail';
import storage from 'good-storage';

export default {
  components: {
    'visual-data-box': VisualDataBox,
    detail: Detail,
  },

  data() {
    return {
      list: [],
    };
  },

  mounted() {
    this.getMsg();
  },

  methods: {
    async getMsg() {
      let params = {
        data: {
          page: 1,
          pageSize: 12,
          order: { date_time: -1 },
          basis: 2,
          searchValue: {
            type: '业务操作',
          },
        },
        url: '/sys/userlog/loglist',
      };
      if (this.types) {
        params.data.pageSize = 20;
        params.data.searchValue.username = storage.session.get('username');
      }
      let { status, result } = await reqPost(params);
      status && (this.list = result.result);
    },

    showMsg(msg) {
      this.$refs.JDetail.show(msg);
    },
  },
};
</script>

<style lang="less" scoped>
.hot-message {
  flex: 1 1 626px;
  height: 683px;
  padding: 0 16px 10px;
  box-sizing: border-box;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  &::-webkit-scrollbar {
    display: none;
  }
  &:hover {
    background: #12419d;
  }

  .msg-box {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #cccccc;
    display: flex;
    align-items: center;
    cursor: pointer;
    .detail {
      flex: 1;
      .msg {
        line-height: 20px;
        margin-bottom: 5px;
        font-size: 14px;
        color: #ffffff;
      }
      .other {
        display: flex;
        align-items: flex-start;
        .other-box {
          flex: 1;
          line-height: 18px;
          text-align: left;
          font-size: 12px;
          color: #3ac0ff;
        }
      }
    }
    .icon {
      flex: 0 0 auto;
      display: block;
      font-size: 25px;
    }
  }
}
</style>